<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import DataTable from '@/components/DataTable.vue'
import dayjs from "dayjs";
import {getCsnPage} from "@/api/data";

const props = defineProps({
  needSearchForm:{
    type:Boolean,
    default:true
  },
  hasPagination:{
    type:Boolean,
    default:true
  }
})

const loadData = () => {
  loading.value = true
  getCsnPage(conditionForm.time, conditionForm.grade, pageInfo.currentPage, pageInfo.pageSize).then(res => {
    tableData.value = res.data.records
    pageInfo.total = res.data.total
    loading.value = false
  })
}

const conditionForm = reactive({
  grade: 0,
  time: 0
})

const times = [
  {
    value: 0,
    label: '全部'
  },
  {
    value: 1,
    label: '最近24小时内地震'
  },
  {
    value: 2,
    label: '最近48小时内地震'
  },
  {
    value: 3,
    label: '最近7天内地震'
  },
  {
    value: 4,
    label: '最近30天内地震'
  },
  {
    value: 5,
    label: '最近一年内地震'
  }
]
const grades = [
  {
    value: 0,
    label: '全部'
  },
  {
    value: 1,
    label: '6.0级以上地震'
  },
  {
    value: 2,
    label: '5.0级以上地震'
  },
  {
    value: 3,
    label: '4.0级以上地震'
  },
  {
    value: 4,
    label: '3.0级以上地震'
  },
  {
    value: 5,
    label: '3.0级一下地震'
  }
]

const tableHead = [
  {
    prop: 'otime',
    label: '发震时刻',
    width: 160,
    formatter: (row: any) => {
      return dayjs(new Date(row.otime)).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  {
    prop: 'm',
    label: '震级(M)'
  },
  {
    prop: 'epiLat',
    label: '纬度(°)',
  },
  {
    prop: 'epiLon',
    label: '经度(°)',
  },
  {
    prop: 'epiDepth',
    label: '深度(千米)',
    width: 100
  },
  {
    prop: 'locationC',
    label: '参考位置',
    width: 200
  }
]

const tableData = ref([])

const pageInfo = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,

})
const loading = ref(false)

const handleCurrentPage = (val: number) => {
  pageInfo.currentPage = val
  loadData()
}
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="earthquake-info">
    <div class="condition" v-if="needSearchForm">
      <el-form :inline="true" :model="conditionForm" class="con-form" size="default">
        <el-form-item label="时间">
          <el-select v-model="conditionForm.time" placeholder="请选择时间"
                     @change="loadData"
                     style="width:150px;">
            <el-option
                v-for="item in times"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="震级">
          <el-select v-model="conditionForm.grade" placeholder="请选择震级"
                     @change="loadData"
                     style="width:150px;">
            <el-option
                v-for="item in grades"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <DataTable
        :hasIndex="false"
        :tableHead="tableHead"
        :tableData="tableData"
        :is-has-pagination="hasPagination"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.currentPage"
        table-height="300px"
        :table-loading="loading"
        @changeCurrentPage="handleCurrentPage"
        :layout="'prev, pager, next'"
        :border="true">
    </DataTable>
  </div>
</template>

<style scoped lang="scss">
.earthquake-info {
  width: 100%;
  height: calc(100% - 60px);

  :deep(.el-table) {
    background: none !important;
    --el-table-border-color: rgba(23, 156, 156, 0.6) !important;
  }

  :deep(.el-table tr) {
    background-color: rgba(0, 63, 63, 0) !important;
    color: rgba(54, 215, 215, 1) !important;
  }

  :deep(.data-table-wrap .el-table th.is-leaf) {
    background-color: rgba(6, 175, 175, 0.2) !important;
    color: rgba(54, 215, 215, 1) !important;
    border-bottom: 1px solid rgba(22, 198, 198, 0.6) !important;
  }

  :deep(.el-table td, .el-table th.is-leaf ) {
    border-bottom: 1px solid rgba(23, 156, 156, 0.6) !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
    background-color: rgba(6, 175, 175, 0.2)
  }

  :deep(.el-button--success) {
    background-color: rgba(6, 175, 175, 0.2);
    border-color: rgba(6, 175, 175, 0.6);
  }

  .condition {
    padding: 10px 10px 0px 10px;
  }

  .no-search-table-container {
    height: calc(100% - 50px);
  }
}
</style>
